<template>
  <view class="upload-main">
    <van-uploader
      v-model="fileList"
      multiple
      icon="plus"
      :max-count="maxCount"
      :after-read="afterRead"
      @delete="deleteImage"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { BASE_URL } from "@/config/base";

const props = defineProps({
  maxCount: {
    default: 9,
    type: String || Number,
  },
});

const fileList = ref([
  // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
]);

const emit = defineEmits(["upload"]);

const urlList = ref([]);
const afterRead = async (_data) => {
  uni.showLoading({
    title: "上传中",
  });
  for (let i = 0; i < fileList.value.length; i++) {
    const item = fileList.value[i];
    if(item.status == "success"){
      // 已经上传的 或者上传失败的不处理
      continue;
    }
    fileList.value[i] = await newPrimesFun(item);
  }

  let arr = [];
  fileList.value.forEach((val) => {
    if(val.status == "success") arr.push(val.url);
  });
  emit("upload", arr);
};


const newPrimesFun = (item) =>{
  return new Promise((resolve,reject) => {
    item.status = "uploading";
    item.message = "上传中";

    uni.uploadFile({
      // /prod-api/common/upload
      // url: BASE_URL + "/common/upload",
      url: BASE_URL + "/prod-api/common/upload",
      header: {
        Authorization: "Bearer " + uni.getStorageSync("token"),
      },
      filePath: item.objectUrl,
      name: "file",
      success: async (result) => {
        let resultObj = JSON.parse(result.data);
        item.status = "success";
        item.message = "上传完成";
        item.url = await resultObj.url;
        uni.showToast({
          title: "上传成功",
          icon: "none",
        });
        uni.hideLoading();
        resolve(item);
      },
      fail: (err) => {
        uni.hideLoading();
        item.status = "failed";
        item.message = "上传失败";
        reject(item);
        uni.showToast({
          title: "上传失败",
          icon: "none",
        });
      },
    });

  })
}

const deleteImage = (_data, indexObject) => {
  const { index } = indexObject;
  fileList.value.splice(index, 1);

  let arr = [];
  for (let i = 0; i < fileList.value.length; i++) {
    const item = fileList.value[i];
    if(item.status == "success"){
      arr.push(item.url);
    }
  }
  emit("upload", arr);

};
</script>

<style lang="scss" scoped>
$up: 200rpx;

:deep(.van-image__img) {
  width: $up;
  height: $up;
  border-radius: 16rpx;
}

:deep(.van-uploader__preview) {
  width: $up;
  height: $up;
  border-radius: 16rpx;
}

:deep(.van-uploader__preview-image) {
  width: $up;
  height: $up;
  border-radius: 16rpx;
}

:deep(.van-uploader__upload) {
  width: $up;
  height: $up;
  border-radius: 16rpx;
  background-color: #fff;
}

:deep(.van-uploader__preview-delete--shadow) {
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8rpx;
  opacity: 0.5;
  background: #000000;
  width: 44rpx;
  height: 44rpx;
}

:deep(.van-uploader__preview-delete-icon) {
  font-size: 60rpx;
}
</style>
